/* 学习目标：useState声明数据，修改数据  */

// 类似vue中 useRef(初始值)
// 语法： const [数据变量， 更新数据变量的函数] = useState(初始值)
// 概念：不可变数据， React不允许直接修改原始数据
// 推荐： 👍👍 新值覆盖旧值
// 更新变量的函数(新值)

import { useState } from 'react';

export default function App() {
  let [count, setCount] = useState(0);
  const [list, setList] = useState([1, 2, 3]);

  return (
    <div>
      {list}
      <hr />

      <p>当前数值为：{count}</p>
      <hr />
      <button
        onClick={() => {
          // ✅ setCount(新值)
          setCount(100);

          // ✅
          const newList = [...list, 4];
          setList(newList);

          // 不可变数据: 不允许修改原始数据，
          // 💥💥 新值覆盖旧值： setXxx(新值)
          //  ❌ count++;
          //  ❌ list.push(4);
        }}
      >
        +1
      </button>
    </div>
  );
}
